import React,{useEffect} from 'react'
import Head from './Head'
import {connect } from 'react-redux'
import {student} from './actionCreators'
import {func} from './actionCreators'
import './head.css'
const Student = (props) => {

    let i=0;
    
     useEffect(() => {
        props.dispatch(student())
    },[])
    return (
        <div>
            <Head/>
            <div className='title'>
                学生管理
            </div>
            <div className='student'>
                <div className='addstu'>
                    <div>新增学生</div>
                    <form id = "stu" action="" method="post">
                        <span>学号:</span><input type='text' name='sno'/><br/>
                        <span>姓名:</span><input type='text' name='sname'/><br/>
                        <span>密码:</span><input type='password' name='pwd'/>

                    </form>
                    <button style={{marginTop:'30px'}}
                // className='add'
                onClick={(adds)=>{
                    
                    let stu=document.getElementById('stu');
                    let sno=stu.sno.value;
                    let sname=stu.sname.value;
                    let pwd=stu.pwd.value;
                    adds={type:'adds',table:'student',sno:sno,sname:sname,pwd:pwd}
                                                       
                    props.dispatch(func(adds))
                    setTimeout(()=>{
                        props.history.go(0);
                        alert('添加成功')

                    },1000)
                }}>添加</button>
                    
                    

                </div>
                <table border='1' cellspacing='0'>
                    <tr>
                        <th>排序</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>密码</th>
                        <th>操作</th>

                    </tr>
                    {props.students.map((item)=>{
                        i++;
                        return<tr>
                            <td>{i}</td>
                            <td>{item.Sno} </td>
                            <td>{item.Sname}</td>
                            <td >******</td>
                            <td>
                            <button
                                onClick={(delf)=>{
                                   
                                    let Sno=item.Sno;
                                    delf={type:'delf',table:'Student',sno:Sno}
                                    props.dispatch(func(delf))
                                    setTimeout(()=>{
                                        props.history.go(0);
                                        alert('删除成功');
                                    },1000)
                                }}
                                >删除</button>
                            </td>                                   
                        </tr>
                    })} 
                </table>
            </div>
        </div>
    )
}

const mapStateToProps=(state)=>({
    students:state.student.students,
    rets:state.func.rets
  })
export default connect(mapStateToProps)(Student)
